<template>
    <div>
        <!-- <el-row><button @click="msgTest">click</button></el-row> -->
        
        <div class="msgrow" ref="contEl">
            
            <span v-for="(item,idx) in showList" :key="idx" v-html="item" class="blink">
                
            </span>
        </div>
    </div>
</template>


<script>

export default {
    data() {
        return {
            idx: 1,
            msgList:[
                // "康泰<br/>wave:1.1<br/>cur:167.85(13.44%)<br/>13:21:39->13:22:48<br/>166.03->167.85<br/>",
                // "康泰<br/>wave:1.1<br/>cur:167.85(13.44%)<br/>13:21:39->13:22:48<br/>166.03->167.85<br/>",
                // "康泰<br/>wave:1.1<br/>cur:167.85(13.44%)<br/>13:21:39->13:22:48<br/>166.03->167.85<br/>",
                // "康泰<br/>wave:1.1<br/>cur:167.85(13.44%)<br/>13:21:39->13:22:48<br/>166.03->167.85<br/>",
            ]
        }
    },
    computed:{
        showList(){
            if(this.msgList.length<=6){
                return this.msgList;
            }
            var len = this.msgList.length;
            return this.msgList.filter((item,idx)=>{return idx>=len-6})
        }
    },

    mounted() {
        document.title="msg tips";
        // setTimeout(()=>{
        //     this.closeWin()
        // },5000);
        window.addMsg = this.addMsg;
        this.addMsg("<span class='red'>提示窗口已加载</span>");
        this.addMsg("<span class='red'>托盘图标可以控制各窗口隐藏/显示</span>");
    },

    methods: {
        setType(type){
            this.type = type;
            this.dialogVisible = true;
            this.name = this.eventMap[type];
        },
        msgTest(){

            var msg = this.idx + ".康泰<br/>wave:1.1<br/>cur:167.85(13.44%)<br/>13:21:39->13:22:48<br/>166.03->167.85<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
            this.idx++;
            this.addMsg(msg);
        },
        addMsg(msg){
            this.msgList.push(msg);
            setTimeout(()=>{this.msgList.shift()},7000);
            this.$nextTick(()=>{
                this.$refs.contEl.scrollLeft  = this.$refs.contEl.scrollWidth;
            });
        }
    }
}
</script>

<style lang="less">

.red{
    color: red;
}
.green{
    color: green;
}
.black{
    color: black;
}
.yellow{
    color: rgb(96, 22, 233)
}

/* 定义keyframe动画，命名为blink */
@keyframes blink{
  0%{opacity: 1;}
  50%{opacity: 0.4;}
  100%{opacity: 1;} 
}
/* 定义blink类*/
.blink{
    animation: blink 1s linear infinite;  
    /* 其它浏览器兼容性前缀 */
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    -ms-animation: blink 1s linear infinite;
    -o-animation: blink 1s linear infinite;
}
</style>
<style lang="less">
body{
    overflow: hidden;
}
.msgrow{
    font-size:12px;
    // width: 100%;
    text-align: right;
    // font-weight: bold;
    width: 690px;
    max-width: 10000px;
    overflow: auto;
    // background: white;
    display: flex;
    justify-content: flex-end;
    // direction: row;
    // border: 1px red solid;
    span{
        text-align: center;
        display: inline-block;
        margin-left: 5px;
        min-width: 115px;
        max-width: 125px;
        word-break:break-all;
        background:white
    }
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 1px;  /*滚动条宽度*/
    height: 1px;  /*滚动条高度*/
}  
</style>
